{extend name="layout" /}
{block name="content"}
<div class="card shadow-none">
    <div class="card-header card-header-stretch">
        <div class="card-toolbar">
            <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x nav-stretch fs-6 border-0">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab1"><i class="bi bi-upload fs-6 me-1"></i>上传文件</a>
                </li>
            </ul>
        </div>
        <div class="d-flex align-items-center">
            <span class="btn btn-primary btn-sm btn-upload-confirm"><i class="fas fa-check-circle"></i>确定</span>
        </div>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade active show" id="tab1" role="tabpanel">
                <div class="dropzone min-h-350px w-100 bg-lighten border-gray-300 border-2 d-inline-flex flex-wrap align-items-center justify-content-center" id="upload-container">
                    <!--begin::Message-->
                    <div class="dz-message needsclick">
                        <!--begin::Icon-->
                        <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
                        <!--end::Icon-->

                        <!--begin::Info-->
                        <div class="ms-4">
                            <h3 class="fs-5 fw-bolder text-gray-900 mb-1">点击或拖拽文件进行上传</h3>
                            <span class="fs-7 fw-bold text-gray-400">文件大小最大{$upload_config.size|default="1"}MB，最多上传{$upload_config.num|default="0"}个文件</span>
                        </div>
                        <!--end::Info-->
                    </div>
                </div>
                <div id="uploaded-files">

                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="bottom"}
<script>
    var type = '{$upload_config.type|default="one"}';
    var field = '{$upload_config.field|default=""}';
    $(function(){
        $('.btn-upload-confirm').click(function(){
            $(this).addClass('disabled');//防止重复

            var html = '';
            var name = type === 'multi' ? field+'[]': field;//隐藏表单的name

            //遍历隐藏表单
            $('#uploaded-files :input').each(function(){
                var path = $(this).val();
                if(path){
                    html += '<div class="card overlay w-100px h-100px me-3 mb-3 overflow-hidden  shadow-sm draggable">\n' +
                        '          <div class="card-body p-0">\n' +
                        '               <input type="hidden" name="'+name+'" value="'+path+'" />'+
                        '               <div class="overlay-wrapper">\n' +
                        '                    <span class="text-muted">'+path+'</span>\n' +
                        '               </div>\n' +
                        '               <div class="overlay-layer bg-dark bg-opacity-25">\n' +
                        '                   <a href="'+path+'" download="" class="btn btn-primary btn-icon  btn-sm w-25px h-25px" title="下载文件"><i class="bi bi-download"></i></a>\n' +
                        '                   <span class="btn btn-danger btn-icon  btn-sm ms-1 img-remove w-25px h-25px" title="删除"><i class="bi bi-trash"></i></span>\n' +
                        (type === 'multi' ? '<span class="btn btn-info btn-icon btn-sm ms-1 draggable-handle w-25px h-25px" title="拖拽排序"><i class="bi bi-arrows-move"></i></span>\n' : '') +
                        '                </div>\n' +
                        '          </div>\n' +
                        '    </div>';
                }
            });

            if (html === '') {
               return;
            }
            if(type === 'multi'){
                parent.$('#'+field+' .files-preview').append(html);
            }else{
                parent.$('#'+field+' .files-preview').empty().html(html);
            }

            parent.layer.closeAll();

        });

        $("#upload-container").dropzone({
            url: '{$upload_config.url|default=""}',
            paramName:'file',
            acceptedFiles:'{$upload_config.accept|default=""}', //可以上传的文件类型(在选择的时候就进行了过滤)，支持扩展名和mime的方式（image/*,application/txt）
            maxFiles:{$upload_config.num|default="0"}, //可以上传的文件个数
            maxFilesize: {$upload_config.size|default="1"},//单个文件上传的大小，单位Mb
            addRemoveLinks:true, //添加删除按钮
            disablePreviews:false, //不显示预览框
            filesizeBase: 1024,
            createImageThumbnails:true, // 是否生成预览图
            /**
             * The text used before any files are dropped.
             */
            dictDefaultMessage: "点击或拖拽文件进行上传",

            /**
             * The text that replaces the default message text it the browser is not supported.
             */
            dictFallbackMessage: "你的浏览器不支持拖拽上传",

            /**
             * The text that will be added before the fallback form.
             * If you provide a  fallback element yourself, or if this option is `null` this will
             * be ignored.
             */
            dictFallbackText:
                "Please use the fallback form below to upload your files like in the olden days.",

            /**
             * If the filesize is too big.
             * `{{filesize}}` and `{{maxFilesize}}` will be replaced with the respective configuration values.
             */
            dictFileTooBig:
                "当前文件过大 ({{filesize}}MB)，最大: {{maxFilesize}}MB。",

            /**
             * If the file doesn't match the file type.
             */
            dictInvalidFileType: "文件类型不允许",

            /**
             * If the server response was invalid.
             * `{{statusCode}}` will be replaced with the servers status code.
             */
            dictResponseError: "上传失败，状态码： {{statusCode}} ",

            /**
             * If `addRemoveLinks` is true, the text to be used for the cancel upload link.
             */
            dictCancelUpload: "取消上传",

            /**
             * The text that is displayed if an upload was manually canceled
             */
            dictUploadCanceled: "已取消上传",

            /**
             * If `addRemoveLinks` is true, the text to be used for confirmation when cancelling upload.
             */
            dictCancelUploadConfirmation: "确定取消上传吗?",

            /**
             * If `addRemoveLinks` is true, the text to be used to remove a file.
             */
            dictRemoveFile: "移除文件",

            /**
             * If this is not null, then the user will be prompted before removing a file.
             */
            dictRemoveFileConfirmation: null,

            /**
             * Displayed if `maxFiles` is st and exceeded.
             * The string `{{maxFiles}}` will be replaced by the configuration value.
             */
            dictMaxFilesExceeded: "最多上传{{maxFiles}}个文件",
            init:function(){
                this.on('uploadprogress',function(file, progress, bytesSent){
                    //上传进度

                });

                this.on('addedfile',function(file){
                    $('.btn-upload-confirm').addClass('disabled');

                });

                this.on('success',function(file,res){
                    if(res.code == 1) {
                        $('#uploaded-files').append('<input type="hidden" value="'+res.data.url+'" id="'+file.upload.uuid+'">')
                    } else {
                        myadmin.notice(file.name+'：'+res.msg,'error');
                    }

                });
                this.on('error',function(file, message){
                    //上传失败
                    myadmin.notice(file.name+'：'+message,'error')
                });
                this.on('removedfile',function(file){
                    //删除文件对应的url
                    $('#uploaded-files').find('#'+file.upload.uuid).remove();

                });
                this.on('complete',function(file){
                    //上传结束需要做的操作，不论成功或失败都会执行

                });

                this.on('queuecomplete',function(file){
                    //整个队列完成后的处理
                    $('.btn-upload-confirm').removeClass('disabled');
                });
            },

        });
    })
</script>
{/block}